<template>
  <div class="chartContainer">
    <div class="title">投资规模</div>
    <div class="barChart" id="barChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "barChart",
  data(){
    return{
      myChart:null
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){
      this.myChart = echarts.init(document.getElementById('barChart'));
      let  option = {
        color: ["#3cefff"],
        tooltip: {
          formatter(a){
            return a.name+'规模为:'+a.data
          }
        },
        // grid: {
        //   containLabel: true
        // },
        xAxis: [{
          type: "category",
          data: ["一千万以下", "一千万至五千万", "五千万至一亿", "一亿以上"],
          axisTick: {
            alignWithLabel: true
          },
          nameTextStyle: {
            color: "#82b0ec"
          },
          axisLine: {
            lineStyle: {
              color: "#82b0ec"
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#82b0ec"
            }
          }
        }],
        yAxis: [{
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#82b0ec"
            },
            formatter: "{value}"
          },
          splitLine: {
            show:false,
            lineStyle: {
              color: "#0c2c5a"
            }
          },
          axisLine: {
            show: false
          }
        }],
        series: [{
          name: "",
          type: "pictorialBar",
          symbolSize: [10, 10],
          symbolOffset: [0, -5],
          symbolPosition: "end",
          z: 12,
          label: {
            normal: {
              show: true,
              position: "top",
              formatter: "{c}"
            }
          },
          data: [60, 70, 80, 90]
        }, {
          name: "",
          type: "pictorialBar",
          symbolSize: [10, 10],
          symbolOffset: [0, 5],
          z: 12,
          data: [60, 70, 80, 90]
        }, {
          type: "bar",
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              colorStops: [{
                offset: 1,
                color: "#0D5EB1"
              }, {
                offset: 0,
                color: "#00D7E9"
              }]
            }
          },
          barWidth: "10",
          data: [60, 70, 80, 90],
          markLine: {
            silent: true,
            symbol: "none",
            label: {
              position: "middle",
              formatter: "{b}"
            },

          }
        }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.chartContainer{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  flex-direction: column;
  .title{
    background-image: url("./assets/images/小标题.png");
    width: 20%;
    height: 25px;
    background-size: 100% 100%;
    color: white;
  }
  .barChart{
    width: 100%;
    height: 100%;
  }
}
</style>